<template>
  <div class="personList-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback">
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <div class="c_container">
      <div class="user_card" v-for="i in 6" :key="i">
        <div class="line"></div>
        <div class="info">
          <div class="photo">
            <img src="../../assets/image/pp_m.png" />
          </div>
          <div class="msg">
            <van-cell-group>
              <van-cell title="张三（生产负责人）" />
              <van-cell title="岗位" value="普通人员" />
              <van-cell title="身份证" value="450106198306120018" />
            </van-cell-group>
          </div>
        </div>
        <div class="certificate">
          <div class="name">
            <span>二级防护师执业资格证书</span>
          </div>
          <div class="img_sets">
            <img src="../../assets/image/timg.jpg" alt v-for="i in 3" :key="i" />
          </div>
        </div>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "personList",
  data() {
    return {
      componentName: "从业人员",
      dwid: 999
      // imgSrc:require('../../../assets/image/pp_m.png')
    };
  },
  methods: {
    goback() {
      this.$router.back(-1);
    }
  },
  mounted() {
    this.dwid = this.$route.params.dwid;
  }
};
</script>
<style lang="scss" scoped>
.personList-comp-ct {
  .cfs {
    font-weight: bold;
  }
  .user_card {
    margin: 10px;
    .line {
      min-height: 5px;
      background: linear-gradient(
        to right,
        rgb(3, 72, 151),
        rgb(133, 179, 240)
      );
    }
    .info {
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      .photo {
        flex: 1;
        img {
          min-height: 120px;
        }
      }
      .msg {
        flex: 2;
        .van-cell {
          .van-cell__title {
            text-align: left;
            font-weight: bold;
          }
          .van-cell__value {
            flex: 3;
            text-align: left;
          }
          line-height: 18px;
          border-bottom: 1px dashed;
        }
      }
    }
    .certificate {
      .name {
        text-align: left;
        margin-left: 5px;
        line-height: 1.5rem;
      }
      .img_sets {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        img {
          max-width: 30px;
          max-height: 45px;
          padding: 10px;
        }
      }
    }
  }
}
</style>
